<script setup lang="ts">
import { reactive, ref, onBeforeUnmount } from 'vue'
import { bus } from '@/utils/mitt'
import { createAdminAPI } from '@/http/admin'
import { ElMessage } from 'element-plus'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const title = ref()
const addAdminDialog = ref()
const addAdminFormRef = ref()
let addAdminForm = reactive({
  account: '',
  newPassword: '',
  name: '',
  sex: '',
  email: '',
  department: '',
  identity: '',
})
const rules = reactive({
  account: [
    { required: true, message: '请输入管理员的注册账号', trigger: 'blur' },
    { min: 6, max: 12, message: '账号长度在6-12位之间', trigger: 'change' },
  ],
  newPassword: [
    { required: true, message: '请输入管理员的注册密码', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在6-12位之间', trigger: 'change' },
  ],
  name: [{ required: true, message: '请输入管理员的姓名', trigger: 'blur' }],
  sex: [{ required: true, message: '请输入管理员的性别', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入管理员的邮箱', trigger: 'blur' },
    { min: 6, max: 18, message: '邮箱长度在6-18位之间', trigger: 'change' },
  ],
  department: [
    { required: true, message: '请输入管理员的部门', trigger: 'blur' },
  ],
})
const open = () => {
  addAdminForm.account = ''
  addAdminForm.newPassword = ''
  addAdminForm.name = ''
  addAdminForm.sex = ''
  addAdminForm.email = ''
  addAdminForm.department = ''
  addAdminDialog.value = true
}
(bus as any).on('createId', (id: number) => {
  if (id == 1) {
    title.value = '新建产品管理员'
    addAdminForm.identity = '产品管理员'
  } else if (id == 2) {
    title.value = '新建用户管理员'
    addAdminForm.identity = '用户'
  } else if (id == 3) {
    title.value = '新建消息管理员'
    addAdminForm.identity = '消息管理员'
  }
})
const emit = defineEmits(['adminList'])
const onSubmitAddAdminForm = async () => {
  if (userStore.identity == '用户') return ElMessage.error('您无权进行修改！')
  await addAdminFormRef.value.validate()
  const res = await createAdminAPI(addAdminForm)
  if (res.status == 1) {
    ElMessage.error(`${res.message}`)
  } else if (res.status == 200) {
    ElMessage.success(`${res.message}`)
    emit('adminList')
    addAdminDialog.value = false
  } else {
    ElMessage.error('注册失败！')
  }
}
defineExpose({
  open,
})
onBeforeUnmount(() => {
  bus.all.clear()
})
</script>

<template>
  <el-dialog v-model="addAdminDialog" :title="title" width="500">
    <el-form
      :model="addAdminForm"
      label-width="auto"
      style="max-width: 600px"
      :rules="rules"
      ref="addAdminFormRef"
      :disabled="userStore.identity == '用户' ? true : false"
    >
      <el-form-item label="账号" prop="account">
        <el-input v-model="addAdminForm.account" placeholder="输入您的账号" />
      </el-form-item>
      <el-form-item label="密码" prop="newPassword">
        <el-input
          v-model="addAdminForm.newPassword"
          type="password"
          placeholder="输入您的密码"
        />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="addAdminForm.name" placeholder="输入您的姓名" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="addAdminForm.sex" placeholder="输入您的性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="addAdminForm.email" placeholder="输入您的邮箱" />
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-select v-model="addAdminForm.department" placeholder="输入您的部门">
          <el-option label="总裁办" value="总裁办"></el-option>
          <el-option label="项目部" value="项目部"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addAdminDialog = false">取消</el-button>
        <el-button type="primary" @click="onSubmitAddAdminForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
